// components/electrons/VerticalLabel.jsx
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Box, Typography } from '@mui/material';

/**
 * VerticalLabel Component
 * 
 * Displays a TextField's label vertically on both sides of the viewport when the field is focused
 * 
 * @param {Object} props
 * @param {string} props.label - The label text to display vertically
 * @param {boolean} props.isVisible - Controls visibility of the component
 * @param {number} props.fontSize - Font size in rem (defaults to 3)
 * @param {string} props.color - Color of the text (defaults to primary color)
 * @returns {React.ReactElement}
 */
const VerticalLabel = ({ 
  label = '', 
  isVisible = false, 
  fontSize = 3, 
  color = 'primary.main' 
}) => {
  const [words, setWords] = useState(['', '']);
  
  // Split the label into two words (or use the first word twice if only one word)
  useEffect(() => {
    const labelWords = label.split(' ');
    if (labelWords.length === 1) {
      setWords([labelWords[0], labelWords[0]]);
    } else {
      // Get first word and combine the rest as the second "word"
      const firstWord = labelWords[0];
      const secondWord = labelWords.slice(1).join(' ');
      setWords([firstWord, secondWord]);
    }
  }, [label]);

  return (
    <AnimatePresence>
      {isVisible && (
        <>
          {/* Left side vertical text */}
          <Box
            sx={{
              position: 'fixed',
              left: 4,
              top: '50%',
              transform: 'translateY(-50%)',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              pointerEvents: 'none',
              zIndex: 1000
            }}
          >
            {words[0].split('').map((letter, index) => (
              <motion.div
                key={`left-${index}`}
                initial={{ x: '-100vw', opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                exit={{ x: '-100vw', opacity: 0 }}
                transition={{ 
                  duration: 0.5,
                  delay: index * 0.1,
                  type: 'spring',
                  stiffness: 100
                }}
              >
                <Typography
                  variant="h1"
                  component="div"
                  sx={{
                    fontSize: `${fontSize}rem`,
                    color: color,
                    fontWeight: 'bold',
                    textShadow: '0px 0px 8px rgba(255,255,255,0.7)',
                    my: 0.5
                  }}
                >
                  {letter}
                </Typography>
              </motion.div>
            ))}
          </Box>

          {/* Right side vertical text */}
          <Box
            sx={{
              position: 'fixed',
              right: 4,
              top: '50%',
              transform: 'translateY(-50%)',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              pointerEvents: 'none',
              zIndex: 1000
            }}
          >
            {words[1].split('').map((letter, index) => (
              <motion.div
                key={`right-${index}`}
                initial={{ x: '100vw', opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                exit={{ x: '100vw', opacity: 0 }}
                transition={{ 
                  duration: 0.5,
                  delay: index * 0.1,
                  type: 'spring',
                  stiffness: 100
                }}
              >
                <Typography
                  variant="h1"
                  component="div"
                  sx={{
                    fontSize: `${fontSize}rem`,
                    color: color,
                    fontWeight: 'bold',
                    textShadow: '0px 0px 8px rgba(255,255,255,0.7)',
                    my: 0.5
                  }}
                >
                  {letter}
                </Typography>
              </motion.div>
            ))}
          </Box>
        </>
      )}
    </AnimatePresence>
  );
};

export default VerticalLabel;